<template>
  <!--
  单元素动画
   动画条件：进入/离开动作   v-if/v-show 动态组件，组件根节点
   实现
      1:用transition包住动画元素
      2：加入name属性，name的值就是动画css的前缀
          .xxx-enter-active:进入动画过程中一直存在的class,常用于承载transition/animation
          .xxx-enter:进入过程中希望从什么状态变到正常状态（起点状态）
          .xxx-leave-active：离开动画过程中一直存在的class,常用于承载transition/animation
          .xxx-leave-to：离开过程中希望从正常状态变到什么状态（终点状态）
 -->

  <div>
    <button @click="show = !show">按钮点击</button>
    <transition name="xxx">
      <div v-if="show" class="box"></div>
    </transition>
  </div>
</template>
<script>
export default {
  data () {
    return {
      show: true
    }
  }
}
</script>
<style>
.box {
  width: 150px;
  height: 150px;
  background-color: #f00;
  margin: 0 auto;
}
.xxx-enter-active {
  transition: all 0.5s;
}
.xxx-enter {
  opacity: 0;
  transform: translateX(-200px);
}
.xxx-leave-active {
  transition: all 0.5s;
}
.xxx-leave-to {
  opacity: 0;
  transform: translateX(200px);
  width: 0;
  height: 0;
}
</style>
